<template>
	<view class="shopList">
		<!-- 导航条 -->
		<!-- :style="{height: $wanlshop.wanlsys().height + 'px' }" -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input v-model="params.title" placeholder="搜索商品名称" confirm-type='搜索' @confirm='confirm'></input>
				</view>

			</view>
		</view>
		<view class="scrollBox">
			<scroll-view :scroll-y="true" class="scoll-viewS" @scrolltolower="scrolltolower" lower-threshold="500"
				scroll="scroll" style="touch-action: none;">
				<u-checkbox-group @change="checkboxGroupChange" v-model="checkeds" max='1'>

					<view class="checkboxBox" v-for="(i,k) in listData" :key="k">
						<u-checkbox v-model="i.checkbox" :name="i.id">
							<view class="flex">

								<image class="images" :src="$wanlshop.oss(i.image)" mode=""></image>
								<view class="flex1">

									<view class="c3 f28 overflow_3 ml18 fb ">
										{{i.title}}

									</view>

								</view>
							</view>
							<view class="error f24 tar price">
								￥ <text class="f32 fb">{{i.price}}</text>
							</view>
						</u-checkbox>
					</view>

				</u-checkbox-group>
				<uni-load-more :status="statusMore" :content-text="contentText" />
			</scroll-view>
		</view>
		<view class="bottomBtn">
			<view class="btnSub" @click="btnSubmit">
				确定选择
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeBor: true,
				checkeds: [],
				listData: [],
				params: {
					page: 1,
					limit: 10,
					status: 'normal',
					title: '',
				},
				statusMore: 'loading',
				contentText: {
					contentdown: '下拉更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				option: {}
			}
		},
		onLoad(i) {
			this.getlist(i.id.split(',').map(Number))
			this.option = i
		},
		methods: {
			getlist(id) {
				if (!this.timeBor) {
					return
				}
				this.statusMore = 'loading'
				this.$api.get({
					url: '/store.product/productList',
					data: this.params
				}).then(res => {
					console.log(res);
					if (res.data.data) {
						this.timeBor = true
						if (res.data.last_page == 0) {
							this.statusMore = 'noMore';
							return
						}
						if (res.data.last_page === res.data.current_page) {
							this.statusMore = 'noMore';
						} else {
							this.statusMore = 'more';
							this.params.page++;
						}
						res.data.data.forEach(rs => {
							rs.checkbox = false
							// 上个页面带入参数
							if (id) {
								id.forEach(r => {
									if (rs.id == r) {
										rs.checkbox = true
									}
								})

							}
						})
						this.listData = this.listData.concat(res.data.data)
					}
				})
			},

			btnSubmit() {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 2]; //当前页页面实例
				console.log(nowPage, 'nowPage');
				let data = []
				this.listData.forEach((i, k) => {
					this.checkeds.forEach(j => {
						if (i.id == j) {
							data.push(i)
						}
					})
				})
				nowPage.$vm.goods = data
				if (this.option.type == 'modify') {
					nowPage.$vm.list[nowPage.$vm.imageNum].goods = data
				}
				// #ifndef MP-WEIXIN
				nowPage.goods = data
				if (this.option.type == 'modify') {
					nowPage.list[nowPage.imageNum].goods = data
				}
				// #endif
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			confirm() {
				this.params.page = 1
				this.listData = []
				this.getlist()
			},
			checkboxGroupChange(i) {
				console.log(i);
				this.checkeds = i
			},
			scrolltolower(e) {
				if (this.statusMore == 'noMore') {
					return
				}
				if (this.timeBor) {
					this.getlist()
					this.timeBor = false
					setTimeout(() => {
						this.timeBor = true
					}, 500)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.shopList {
		background: #F5F5F5;
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scrollBox {
			flex: 1;
			padding-bottom: 100rpx;
			overflow: hidden;
		}

		.scoll-viewS {
			height: 100%;

			.checkboxBox {
				position: relative;
				margin-bottom: 16rpx;
				width: 100%;
				padding: 20rpx 32rpx;
				background: #fff;
				height: 242rpx;

				.price {
					position: absolute;
					right: 60rpx;
					bottom: 10rpx;
				}

				.images {
					width: 180rpx;
					height: 180rpx;
					border-radius: 16rpx;
					margin-left: 18rpx;
				}
			}
		}

		.cu-bar {
			background: #3065FA;
		}

		.cu-custom {
			background: #3065FA;
			color: #fff;
			height: 88rpx;
		}

		.bottomBtn {
			height: 100rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			padding-bottom: env(safe-area-inset-bottom);

			.btnSub {
				background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				color: #fff;
				width: 512rpx;
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				font-size: 28rpx;
			}
		}
	}
</style>